import React from 'react'
import { Layout } from 'antd'
import { connect } from 'react-redux'
import Logo from '@/assets/images/logo.svg'
import SiderMenu from './Menu'

const { Sider } = Layout

const AppSider = props => {
  const { sidebarCollapsed } = props

  return (
    <Sider width={200} collapsed={sidebarCollapsed} className="app-sider">
      <div className={`app-logo ${!sidebarCollapsed ? '' : 'app-logo-on'}`}>
        <img src={Logo} className="app-logo-img" alt="logo" />
        <h1>海洋二号</h1>
      </div>
      <SiderMenu />
    </Sider>
  )
}

const mapStateToProps = state => {
  return {
    ...state.app
  }
}

export default connect(mapStateToProps)(React.memo(AppSider))
